/* 
    Document   : style
    Created on : 23 Jul, 2014, 12:39:38 AM
    Author     : Rajeev Ranjan
    Description:
            Purpose of the stylesheet follows.
*/

html,body,.navbar-default{background-color: #111;border:none;}
body {
  padding-top: 120px;
}
a,a:focus{outline: none;}
p{ color: #333;}
.pageTitle{font-family: BelleroseLight, Verdana, Arial; color: #35434e; text-transform: uppercase; margin: 0; padding:15px 0 5px; font-size: 34px; font-weight: bold; height: 75px;}
h3{font:22px/1.4 Verdana, Arial, Helvetica, sans-serif; color: #555; padding: 0 0 20px 0; margin: 0; color: #35434e;}
.navbar-default .navbar-collapse {
    margin:auto;
    
}
.navbar{height:125px; background: url('../images/bg_hd.png') repeat-x; width:990px; margin: auto;}

#logo{display: inline-block; background: url('../images/canoe.png') no-repeat; height: 52px; width: 186px; overflow: hidden; text-indent: -999px; margin-top: 20px; margin-left: 10px;}

.navbar .container{height: 86px; background: url('../images/txtImg/headerTxtBg.png') no-repeat 80% center;}
.navbar .container.bgImgDi{height: 86px; background: url('../images/txtImg/headerTxtBg_dynamic_insertion.png') no-repeat center center;}
.navbar .container.kel{height: 86px; background: url('../images/txtImg/headerTxtBg_kel.png') no-repeat center center;}
.navbar .container.prod{height: 86px; background: url('../images/txtImg/headerTxtBg_prod.png') no-repeat center center;}
.navbar .container.int{height: 86px; background: url('../images/txtImg/headerTxtBg_int.png') no-repeat center center;}

.navbar-nav{padding-right: 20px;}
.navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 15px;
    height: 28px;
    font-size: 18px;
    font-family: BelleroseLight;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 0px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,.navbar-default .navbar-nav > li > a {
    color: #fff;
    background-color: transparent;
}


.homepage.container {
    padding-top: 10px;
    background: #3a2719 url('../images/bgGradientHomePage.png') repeat-x;
    position: relative;
}
.homepageSlideTv{height: 316px; width: 318px; background: url('../images/HPtv.png') no-repeat; position: absolute; top: 50%; left: 50%; margin-left: -159px;  margin-top: -158px;}
#hm_tv_slide{position: absolute; left: 21px; top: 22px; overflow: hidden; height: 215px; width: 288px;}
#hm_tv_slide img{}
.navbar-toggle{margin-top: 11px;}

#homepage-tags{}
#homepage-tags > span{display: inline-block; position: absolute; font-size: 22px; font-weight: normal; color: #613e23;display: none;}
#homepage-tags .tag1{top: 50px; left: 150px; font-size: 28px;}
#homepage-tags .tag2{top: 300px; left: 2%; font-size:42px;}
#homepage-tags .tag3{top: 30%; left: 72%; font-size:38px;}
#homepage-tags .tag4{top: 80%; left: 75%; font-size:32px;}
#homepage-tags .tag5{top: 85%; left: 40%; font-size:42px;}

/* about us page */
.inner-page{background:#fff url('../images/bg_left_innerpage1.jpg') repeat-y 0 0; padding: 0;}
.inner-page-wrap{background:url('../images/bg_left_innerpage.jpg') no-repeat 0 0; padding: 0 20px 10px 15px;}
.ctnt-wrap{}
.ctnt-wrap .ctnt-main{float: right; width: 100%; margin-left: -245px;}
.ctnt-wrap .ctnt-main .wrap-inner{margin-left: 245px; min-height: 400px;}
.ctnt-wrap .ctnt-left{float: left; width: 240px; padding-top:20px;}
.leftPanelTv{height: 214px; width: 229px; background: url('../images/TVsub.png') no-repeat; position: fixed; top: 145px;}
.leftPanelTv > img{position: absolute; left: 16px; top: 12px;}
.canoe-sign{float: right; display: block; margin: 4px 0 0 10px;}
.the-chatter{}
.the-chatter > h3{border-bottom: 1px solid #999; padding-bottom: 5px; margin-bottom: 8px;}
.the-chatter > ul > li{padding-bottom: 5px;}
.the-chatter > ul > li > a{font-size: 13px;}
.pt-logos{padding: 15px 0 5px;}
.pt-logos img{display: inline-block; outline: none;}

.cnt-programmers{text-align: center; padding-top: 5px;}
.cnt-programmers img{width: 80%;}

.team-info{padding: 10px 10px 5px 10px; border-radius: 6px; box-shadow: 0px 5px 0px transparent;}
.team-info:hover{}
.highlighted{background: #fff; padding: 10px 10px 5px 10px; border-radius: 6px; box-shadow: -5px 0px 0px #0082c8;}
.team-info .team-member{font-weight: bold; font-size: 16px; color: #444;}
.team-info .team-member a{color: #666;}
.team-info .team-member a:hover{text-decoration: none;}

.products_cnt{padding-bottom: 30px;}
.products_cnt ul li{padding: 2px 0 4px;}
.products_cnt h5{font-weight: bold; color: #35434e; font-size: 16px;}

.integration_cnt{padding-bottom: 20px;}
.integration_cnt h5{font-weight: bold; color: #35434e; font-size: 16px;}

.productImage{float: right; padding-right: 150px;}
.productList{float: left;}
/* footer */
footer.footer{background: #21252f; border-top: 1px solid #646464; width:990px; margin:auto;}
footer.footer .container{padding: 5px; text-align: center; color: #555; font-size: 13px; font-weight: bold;}
.clearfix{clear: both;}


/*responsive css*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.navbar{margin:auto !important; width: 100%; }
body{padding-top: 0;}
.navbar-fixed-top, .navbar-fixed-bottom{position: relative;}
.navbar-default .navbar-nav > li > a{display: block; padding: 5px;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    .navbar{margin:auto !important; width: 100%; }
    .navbar-default .navbar-collapse,footer.footer .container,.footer.footer, .about.container {width: auto;}
    body{padding-top: 0;}
    .navbar-fixed-top, .navbar-fixed-bottom{position: relative;}
    .inner-page{margin-top: -8px;}
    .inner-page-wrap{padding-top: 12px;}
}

@media (min-width: 768px){
    .container { width: 100%;}
    .navbar-nav > li > a {padding:0 20px;height: 35px; line-height: 20px;}
    .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover{background: #0174b2; color: #fff; }
    .navbar-default .navbar-nav > li > a:hover{background: #363c48;}
    .navbar-default .navbar-collapse,footer.footer {width: auto;}

    .navbar-nav{float:right;}
     
    .navbar-collapse.collapse{height: 35px !important;}
}



@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .navbar-nav > li > a {padding:0 20px;height: 35px; line-height: 1.5em;}
}
@media (min-width: 992px){
    .navbar-default .navbar-collapse,footer.footer {width: auto;}
    .container { width: auto;}
     .navbar-nav li{margin-left:22px; margin-right: 25px;}
}


@media (min-width: 1000px) {
    .homepage.container,.navbar-default .navbar-collapse,footer.footer,.about.container {width: 990px;}   
}

@media all and (max-width:990px) and (min-width: 768px) {
     .navbar,.homepage.container{width:auto;}   
     .navbar-nav li{margin-left:30px; margin-right: 10px;}
}
@media (min-width: 769px) and (max-width:950px){
    .container { width: 100%;}
    .navbar-nav > li > a {padding:0 20px;height: 35px; line-height: 20px;}
    .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover{background: #0174b2; color: #fff; }
    .navbar-default .navbar-nav > li > a:hover{background: #363c48;}
    .navbar-default .navbar-collapse,footer.footer {width: auto;}

    .navbar-nav{float:right;}
    .navbar-nav li{margin-left:4px; margin-right: 4px;}    

}
@media all and (max-width:768px) and (min-width: 320px) {
  .navbar .container,.navbar .container.bgImgDi,.navbar .container.kel,.navbar .container.prod,.navbar .container.int{height: 55px; border-bottom: 1px solid #777; background-size:350px 35px; background-position: 170px center;}
  .navbar-default .navbar-collapse{background: #35434e;}
  .navbar-default .navbar-collapse .navbar-nav{padding-left: 15px; padding-right: 15px;}
  .navbar{height: 55px;}
  body {padding-top: 54px;}
  #logo{margin-left: 10px; margin-top: 5px; background: url('../images/logo_sm.png') no-repeat; height: 42px; width: 149px;}
  footer.footer,.navbar{width:auto;}
   
  .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{background: #02457a;}
 
    #homepage-tags .tag1{top: 5%; left: 10%; font-size: 20px;}
    #homepage-tags .tag2{top: 75%; left: 2%; font-size:22px;}
    #homepage-tags .tag3{top: 12%; left: 72%; font-size:28px;}
    #homepage-tags .tag4{top: 78%; left: 60%; font-size:28px;}
    #homepage-tags .tag5{top: 85%; left: 24%; font-size:28px;}
    
    .ctnt-wrap .ctnt-main .wrap-inner,.ctnt-wrap .ctnt-main{margin-left: 0;}
    .ctnt-wrap .ctnt-left{display: none;}
    .inner-page{background:#fff; padding: 0;}
    .inner-page-wrap{background: none; padding: 0 15px;}
    .highlighted{box-shadow: 0px 1px 5px #999; background: #fdfdf6;}
    .productImage{float: none; padding-right: 0px; display: block; margin-left: 50px;}
    .productList{float: none;}
    
}
@media (min-width: 1000px){
    .container {width: auto;}
}

@media only screen
and (min-device-width : 300px)
and (max-device-width : 768px) {
  .navbar{margin:auto !important; width: 100%; }
  body{padding-top: 0;}
  .navbar-fixed-top, .navbar-fixed-bottom{position: relative;}
  .navbar-default .navbar-nav > li > a{display: block; padding: 5px;}

}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  .canoe-sign{float: right; display: block; margin: 10px 0 0 10px; width: 100%;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  
  .homepage.container,.navbar-default .navbar-collapse,footer.footer,.about.container {width: auto;} 
}
/* iPhone 5 (portrait)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
  .canoe-sign{float: none; margin: 0 0 10px 0;}
}
